<template>
  <div class="top">
    <div class="left">
      <div class="box">
        <div class="one">International Services</div>
        <div class="two">Secure, Affordable Global Shipping</div>
        <div class="three">USPS® international mail services go to more than 180 countries, including Great Britain, Canada, Japan, Mexico, and Australia. Global Express Guaranteed®, Priority Mail Express International®, and Priority Mail International® services include international tracking and some insurance.</div>
        <div class="four">
          <ul>
            <li><a href="#">Choose a service </a>based on delivery speed or price.</li>
            <li>Use <a href="#">Click-N-Ship® service</a> to print postage and address labels online, plus get help with filling out 
              <a href="#">customs forms</a> (including more-detailed package descriptions required by countries that follow European Union (EU) customs rules).</li>
          </ul>
        </div>
        <div class="five">
          <el-button class="button">Print a Label</el-button>
          <a href="#">Learn More</a>
        </div>
      </div>
    </div>
    <div class="right">
      <img src="../../assets/image/international-landing.jpg"/>
    </div>
  </div>
 <div class="body">
  <div class="threeBox">
      <div class="warn">
        <iconInfo class="icon"></iconInfo>
      </div>
      <div class="text">Packages sent to 
        <a href="#">countries that follow European Union (EU) customs rules</a>
         need more-detailed content descriptions for customs forms. 
         <a href="#">Learn what you need to do.</a>
         </div>
    </div>

  <div class="card">
    <div class="title">Go International with USPS</div>
    <div class="boxs" >
      <div class="box"v-for="item in cardList">
        <div class="img">
          <img :src="item.img"/>
        </div>
        <div class="title1">
          <a href="#">{{ item.title }}</a>
        </div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>


  <div class="two1">
    <div class="box">
      <div class="left"><img src="../../assets/image/coworkers-shipping-shipping.jpg"></div>
      <div class="right">
        <div class="title"><a href="#">Enhanced Click-N-Ship</a></div>
        <div class="text">With a free USPS.com account, international shippers, like online sellers, can access the latest features available in the 
          <a href="#">enhanced Click-N-Ship experience</a>
          : streamlined batch shipments, improved favorites, address file uploading, and more. 
          <a href="#">Learn how to get started</a>
          .</div>
      </div>
    </div>
  </div>

  <div class="table">
    <div class="title">Domestic Mail & Shipping Services</div>
    <div class="table">
      <el-table :data="tableData" style="width: 760px;height: 100%;" :row-style="{height:'74px',color:'black'}" :header-row-style="{color:'black'}">
        <el-table-column prop="service" label="Service" width="380px"/>
        <el-table-column prop="shippingTime" label="Shipping Time" width="250px"/>
        <el-table-column prop="pricing" label="Pricing" width="90px"/>
      </el-table>
    </div>
    <div class="button">
      <el-button>See All Mail & Shipping Servicrs</el-button>
      <a href="#">See Domestic Mail & Shipping Services</a>
    </div>
  </div>

  <div class="list">
    <ol>
      <li v-for="item in list">{{item.list}}</li>
    </ol>
  </div>
 </div>
 <!-- <feet></feet> -->
</template>
<script setup>
import { backtopEmits } from 'element-plus';
import feet from '../../components/modules/feet.vue'
import iconInfo from '../../assets/icon/info-icon.vue'
import {ref} from 'vue'

const cardList=ref([
  {
    img:'https://www.usps.com/assets/images/business/internationa-insurace-550x250.jpg',
    title:'International Mailing Services',
    text:'Select from a variety of international services that provide delivery to more than 180 countries.'
  },
  {
    img:'https://www.usps.com/assets/images/business/mail-and-ship-prepare-your-package.jpg',
    title:'Sending International Shipments',
    text:'Get packing tips for your international mail and packages, find out what items are restricted, see weight limits, and more.'
  },  
  {
    img:'https://www.usps.com/assets/images/business/internationa-custom-forms1-550x250.jpg',
    title:'Print Customs Forms',
    text:'You need to fill out a customs form when you ship a package to another country. Use Click-N-Ship and the USPS online customs form tool as a guide.'
  },
  {
    img:'https://www.usps.com/assets/images/business/mail-and-ship-military-mail.jpg',
    title:'Ship to Military',
    text:'Properly prepare APO/FPO/DPO packages using free boxes, correct customs forms, and military mail guidelines.'
  },
  {
    img:'https://www.usps.com/assets/images/business/international-passport-550x250.jpg',
    title:'Passports: Apply or Renew',
    text:'Learn about many Post Office™ locations that accept passport applications for first-time applicants, minors, and people who may not renew their passport by mail.'
  },
  {
    img:'https://www.usps.com/assets/images/business/mail-and-ship-money-order.jpg',
    title:'International Money Orders',
    text:'Learn how to get money to someone in certain locations overseas. Postal international money orders are safe and secure. See the maximum amounts you can send and where.'
  },
])
const tableData=ref([
  {
    service:'Global Express Guaranteed®',
    shippingTime:'1–3 Business Days1',
    pricing:'$$$$',
    mailOrPackage:'Packages'
  },
  {
    service:'Priority Mail Express International®',
    shippingTime:'3–5 Business Days2',
    pricing:'$$$',
    mailOrPackage:'Packages'
  },
  {
    service:'Priority Mail International®',
    shippingTime:'	6–10 Business Days2',
    pricing:'$$',
    mailOrPackage:'Packages'
  },
  {
    service:'First-Class Package International Service®',
    shippingTime:'Varies by Destination',
    pricing:'$',
    mailOrPackage:'Packages'
  },
])
const list=ref([
  {
    list:'For many major markets. Actual number of days may vary. See Publication 141, Global Express Guaranteed Service Description. Back ^',
  },
  {
    list:'For many major markets. Actual number of days may vary based upon origin, destination, and customs delays. Back ^',
  },
])

</script>
<style scoped>
.icon{
  width: 100%;
  height: 100%;
  /* background-color: #000000; */
}
img{
  width: 100%;
  height: 100%;
}
.top{
  width: 100%;
  /* height: 350px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  display: flex;
  /* flex-direction: row; */
  .left{
    width: 55%;
    height: 100%;
    /* overflow-wrap: break-word; */
    margin-bottom: 20px;
    /* float: left; */
    /* background-color: yellowgreen; */
    .box{
      width: 630px;
      height: 100%;
      /* background-color: yellow; */
      float: right;
      .one{
        width: 100%;
        height: 50px;
        text-align: left;
        margin-top: 40px;
        /* background-color: antiquewhite; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        color: #333366;
      }
      .two{
        width: 100%;
        height:30px;
        text-align: left;
        margin-top: 10px;
        /* background-color: yellowgreen; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 28px;
        line-height: 32px;
        color: #333366;
      }
      .three{
        width: 100%;
        /* height: 40px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 10px;
        /* background-color: rgb(50, 195, 205); */
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 22px;
        color: #000000;
        a{
          color: #4889be;
        }
      }
      .four{
        width: 610;
        /* height: 150px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 10px;
        padding-left: 20px;
        /* background-color: yellowgreen; */
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 16px;
        line-height: 22px;
        color: #000000;
        a{
          color: #4889be;
        }
      }
      .five{
        width: 100%;
        height: 45px;
        margin-top: 20px;
        /* background-color: rgb(115, 134, 75); */
        .button{
          width: 200px;
          height: 45px;
          background-color: #333366;
          color: #ffffff;
          font-size: 18px;
          border: 0;
        }
        a{
          font-size: 18px;
          color: #4889be;
          margin-left: 15px;
        }
      }
    }
  }
  .right{
    /* float: right; */
    width: 45%;
    height: 350px;
    background-color: rgb(185, 116, 25);
  }
}
  .body{
    position: relative;
    margin: 20px auto 0;
    min-width: 1170px;
    width: 1170px;
    /* height: 2805px; */
    margin-bottom: 40px;
    /* background-color: yellowgreen; */
    /* margin: 60px 0; */
    /* top:60px; */
    .threeBox{
      width: 100%;
      /* height: 170px; */
      overflow-wrap: break-word;
      margin-top: 50px;
      margin-bottom: 80px;
      background-color: #f4e3db;
      border-left: 15px solid #e71921;
      display: flex;
      flex-direction: row;
      .warn{
        width: 25px;
        height: 25px;
        margin:10px 15px;
      }
      .text{
        width: 100%;
        /* height: 110px; */
        overflow-wrap: break-word;
        /* background-color: yellowgreen; */
        margin: 10px 0;
        a{
          color: #3a74a3;
        }
      }
    }
    .card{
      width: 1050px;
      /* height: 1341px; */
      overflow-wrap: break-word;
      margin: 20px auto 0px;
      /* background-color: #683c3c; */
      .title{     
        width: 100%;
        height: 40px;
        text-align: center;
        /* background-color: yellow; */
        font-size: 28px;
        font-weight: 600;
        color: #333366;
      }
      .boxs{
        width: 100%;
        height: 100%;
        /* overflow-wrap: break-word; */
        /* height: 1200px; */
        margin-top: 20px;
        /* background-color: tomato; */
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
        grid-auto-rows: minmax(100px, auto); /* 每行最小高度为 100px，根据内容自适应 */
        /* display: flex; */
        .box{
          /* float: left; */
          /* max-width: 320px;
          min-height: 360px; */
          margin:10px 0 30px 30px;
          box-shadow: 5px 8px 8px rgba(0, 0, 0, 0.767);
          /* background-color: rgb(9, 172, 184); */
          /* display: flex;
          flex-direction: column; */
          /* overflow: auto; */
          .img{
            width: 100%;
            height: 150px;
            /* margin-bottom: 25px; */
            /* background-color: #4889be; */
          }
          .title1{
            /* width: 100%; */
            /* height: 50px; */
            /* display: ; */
            /* 将样式恢复初始值 */
            /* all:initial; */
            overflow-wrap: break-word;
            margin-top: 25px;
            margin-left: 15px;
            text-align: left;
            /* background-color: yellow; */
            a{
              font-size: 23px;
              color: #4889be;
            }
          }
          .text{
            width: 295px;
            height: 135px;
            margin-top: 10px;
            margin-left: 15px;
            /* background-color: rgb(87, 104, 53); */
            flex: 1;
          }
        }
      }
    }
    .two1{
      width: 100%;
      /* min-height: 300px; */
      overflow-wrap: break-word;
      background-color: #f7f7f7;
      margin-top: 50px;
      /* margin-bottom: 50px; */
      .box{
        width: 1170px;
        margin: 0 auto;
        /* height: 100%; */
        overflow-wrap: break-word;
        /* background-color: yellowgreen; */
        display: flex;
        .left{
          width: 50%;
          height: 300px;
          /* background-color: #333366; */
        }
        .right{
          width: 48%;
          overflow-wrap: break-word;
          /* background-color: violet; */
          padding:0 20px;
          /* padding: 20px; */
          .title{
            height: 40px;
            /* background-color: #f7f7f7; */
            /* text-align: center; */
            margin-top: 60px;
            font-size: 27px;
            font-weight: 800;
            a{
              color: #333366;
            }
          }
          .text{
            width: 100%;
            margin-top: 10px;
            overflow-wrap: break-word;
            /* background-color: yellow; */
            a{
              color: #3a74a3;
            }
            /* padding: 0 10px; */
          }
        }
      }
    }
    .table{
      width: 1050px;
      /* height: 530px; */
      /* margin: 0 auto; */
      margin-top: 80px;
      /* margin-bottom: 20px; */
      /* background-color: yellow; */
      overflow-wrap: break-word;
      .title{     
        width: 100%;
        height: 40px;
        /* text-align: center; */
        /* background-color: rgb(44, 44, 29); */
        font-size: 29px;
        font-weight: 600;
        color: #333366;
      }
      .table{
        width: 100% !important;
        /* height: 450px !important; */
        margin-top: 25px;
      }
      .button{
        width: 100%;
        height: 47px;
        /* background-color: #b80404; */
        margin-top: 80px;
        .el-button{
          height: 100%;
          width: 350px;
          background-color:#333366;
          color:#ffffff;
          font-size:18px;
          font-weight: 600;
          border: 0;
        }
        .el-button:hover{
            background-color: #ffffff;
            color: #333366;
          }
      }
      a{
        margin-left: 20px;
        color: #3a74a3;
        font-weight: 600;
        font-size: 18px;
      }
    }
    .list{ 
      margin-top: 100px;
      overflow-wrap: break-word;
      /* background-color: #3a74a3; */
      padding-left: 20px;
      ol li{
        font-family: "HelveticaNeueW02-55Roma", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        line-height: 22px;
        color: #000000;
      }
    }
  }
</style>